<template>
  <div>
    <div class="mui-card" @click="select(item.id)" v-for="item in addressList" :key="item.id">
      <!--页眉，放置标题-->
      <div class="mui-card-content bold">
        <span>{{item.name}}</span>
        <span>{{item.tel}}</span>
      </div>
      <!--内容区-->
      <div class="mui-card-content">
        <span>{{item.area}}</span>
        <span>{{item.detail}}</span>
      </div>
      <div class="edit">
        <router-link :to="{name: 'address_edit', params: {id: item.id}}">编辑</router-link>
      </div>
    </div>

    <button @click="$router.push('address/add')" class="mui-btn mui-btn-primary btn">新增收货地址</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
     addressList: []
    }
  },
  created() {
    this.getAddress()
  },
  methods: {
    // 查询收货地址列表
    getAddress() {
      this.$indicator.open({
        text: '加载中...'
      })
      this.$http.get('address').then(res => {
        this.$indicator.close()
        if (res.data.code === 1) {
          this.addressList = res.data.data
        } else {
          this.$toast('地址获取失败')
        }
        console.log(this.addressList);
        
      })
    },
    select(id) {
      console.log(id);
      
      // 从创建订单的页面跳转来，是选择收货地址功能，需要返回id
      if (this.$route.name === 'address_select') {
        this.$router.push({name:'order_create', params: {id: id}})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mui-card {
  padding: 15px;
  .bold {
    font-weight: 700;
  }
  .mui-card-content {
    padding-bottom: 3px;
    span {
      padding-right: 15px;
    }
  }
  .edit {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    a {
      color: crimson;
    }
  }
}
.btn {
  width: 80%;
  height: 45px;
  margin-left: 10%;
  font-size: 16px;
  border-radius: 10px;
}
</style>